<template>
	<view>
		<view class="cart">
			<!-- 购物车列表 -->
			<scroll-view scroll-y="true" class="cart-list" style="height: calc(100vh - 100rpx)">
				<view v-for="(item, index) in cartItems" :key="item.id" class="cart-item">
					<view class="checkbox">
						<checkbox :checked="item.selected" @click="selectItem(index, item.id)" />
					</view>
					<view class="item-info">
						<view class="item-details">
							<view class="item-name">{{ item.name }}</view>
							<view class="item-price">价格：¥ {{ item.price }}</view>
						</view>
					</view>
					<view class="item-actions">
						<button class="quantity-btn" @click="decreaseQuantity($event, item.id)">－</button>
						<input class="quantity-input" type="number" :value="item.quantity" disabled />
						<button class="quantity-btn" @click="increaseQuantity($event, item.id)">＋</button>
						<image class="delete-btn" src="/static/删除.png" @click="deleteItem($event, item.id)"></image>
					</view>
				</view>
			</scroll-view>

			<!-- 购物车底部操作栏 -->
			<view class="cart-summary">
				<checkbox :checked="selectAllStatus" @click="selectAll" />
				<view class="select-all">全选</view>
				<view class="summary-total">总计:{{ totalPrice }}¥</view>
				<button class="checkout-btn" @click="onCheckoutTap">结算</button>
			</view>
		</view>

		<!-- 模态窗口 -->
		<view class="modal" v-show="!modalHidden">
			<view class="modal-content">
				<!-- 输入区域 -->
				<input class="input-name" placeholder="收货人姓名" v-model="orderName" />
				<view class="divider"></view>
				<input class="input-address" placeholder="收货人地址" v-model="address" />
				<view class="divider"></view>
				<input class="input-phone" placeholder="收货人电话" v-model="phone" />
				<view class="divider"></view>

				<!-- 支付方式选择 -->
				<radio-group @change="bindPaymentMethodChange">
					<label>
						<radio value="微信" />
						微信
					</label>
					<label>
						<radio value="支付宝" />
						支付宝
					</label>
				</radio-group>

				<!-- 按钮容器 -->
				<view class="modal-buttons">
					<button class="modal-button" @click="submitOrder">提交订单</button>
					<button class="modal-button" @click="hideModal">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cartItems: [],
			carItems1: [],
			totalPrice: 0,
			selectAllStatus: false, // 跟踪全选状态
			modalHidden: true, // 控制模态窗口显示隐藏
			orderName: '',
			address: '',
			phone: '',
			paymentMethod: 'wechat' // 默认支付方式
		};
	},
	onShow() {
		this.fetchCartItems();
	},
	methods: {
		fetchCartItems() {
			uni.request({
				url: 'http://localhost:8080/car/getCar', // 后端接口地址
				method: 'GET',
				success: (res) => {
					console.log(res);
					if (res.data.data && res.data.data.length > 0) {
						const cartItems = res.data.data.map((item) => ({
							id: item.carId,
							name: item.carProductName,
							price: item.carProductPrice,
							quantity: item.carAmount,
							selected: false,
							carProductId: item.carProductId
						}));
						this.cartItems = cartItems;
					} else {
						this.cartItems = [];
						this.totalPrice = 0;
					}
				},
				fail: (err) => {
					console.error(err);
				}
			});
		},

		//选择或取消选择商品
		selectItem(index, id) {
			// 切换对应商品的选中状态
			this.cartItems[index].selected = !this.cartItems[index].selected;
			// 重新计算选中商品的总金额
			this.calculateTotalPrice();
			console.log('勾选后总计改变为：', this.totalPrice);
			// 更新全选状态
			this.selectAllStatus = this.cartItems.every((item) => item.selected);
		},

		// 全选或取消全选的方法
		selectAll() {
			console.log('进入全选、取消全选');
			// 切换全选状态
			this.selectAllStatus = !this.selectAllStatus;
			// 根据全选状态更新每个商品的选中状态
			this.cartItems.forEach((item) => {
				item.selected = this.selectAllStatus;
			});
			// 使用 $nextTick 等待DOM更新
			this.$nextTick(() => {
				console.log('全选状态更新后的选中状态:', this.selectAllStatus);
				// 确保在这里打印日志
				this.calculateTotalPrice();
			});
		},

		//更改数量
		changeQuantity(e) {
			// 获取事件中携带的商品id
			const id = e.currentTarget.dataset.id;
			// 找到当前商品的索引
			const index = this.cartItems.findIndex((item) => item.id === id);
			// 解析输入的新数量
			const newQuantity = parseInt(e.detail.value, 10);
			// 更新商品数量
			this.cartItems[index].quantity = newQuantity > 0 ? newQuantity : 1; // 确保数量不为负数
			// 重新计算选中商品的总金额
			this.totalPrice = this.calculateTotalPrice();
		},

		// 计算总金额
		calculateTotalPrice() {
			if (!this.cartItems) {
				this.totalPrice = 0;
				return;
			}
			const total = this.cartItems.reduce((sum, item) => {
				return sum + (item.selected ? item.price * item.quantity : 0);
			}, 0);
			this.totalPrice = total.toFixed(2);
			console.log('计算总金额::', this.totalPrice);
		},

		//删除商品
		deleteItem(event, itemId) {
			console.log('开始删除');
			const id = itemId;
			console.log('Id' + id);
			const index = this.cartItems.findIndex((item) => item.id === id);
			console.log('要删除的索引' + index);
			this.cartItems.splice(index, 1);
			console.log(this.cartItems);
			this.calculateTotalPrice();
			this.clearSelectedCart();
		},

		decreaseQuantity(event, itemId) {
			console.log('开始减少');
			// 获取商品ID
			const id = itemId;
			// 找到对应的商品
			console.log('Id' + id);
			const index = this.cartItems.findIndex((item) => item.id === id);
			console.log('index' + index);
			if (index !== -1) {
				// 减少数量，数量不能小于1
				this.cartItems[index].quantity = Math.max(this.cartItems[index].quantity - 1, 1);
				// 重新计算总价
				this.calculateTotalPrice();
				console.log('减后的总计' + this.totalPrice);
			}
		},

		// 增加商品数量的方法
		increaseQuantity(event, itemId) {
			// 获取商品ID
			const id = itemId;
			// 找到对应的商品
			console.log('Id' + id);
			const index = this.cartItems.findIndex((item) => item.id === id);
			console.log('index' + index);
			console.log('商品增加');
			console.log('index:' + index);
			if (index !== -1) {
				const productId = this.cartItems[index].carProductId;
				console.log('carProductId' + productId);
				// 发送请求到服务器查询库存
				uni.request({
					url: 'http://localhost:8080/product/getStockByProductId', // 您的库存检查API地址
					method: 'GET',
					data: {
						productId: productId // 使用 carProductId 作为查询库存的参数
					},
					success: (res) => {
						console.log('后端完整响应数据:', res);
						if (res.statusCode === 200) {
							const stock = res.data.data; // 假设服务器返回的库存量
							if (stock >= this.cartItems[index].quantity + 1) {
								this.cartItems[index].quantity += 1;
								this.calculateTotalPrice(); // 重新计算总价
							} else {
								uni.showToast({
									icon: 'none',
									title: '已经没有库存啦'
								});
							}
						}
					},
					fail: (err) => {
						console.log(err);
					}
				});
			}
		},
		checkboxChange(event) {
			const id = event.currentTarget.dataset.id;
			const checked = event.detail.value.length > 0; // 判断是否被勾选
			const index = this.cartItems.findIndex((item) => item.id === id);
			if (index !== -1) {
				this.cartItems[index].selected = checked; // 假设使用 selected 属性代替 checked
				const price = this.cartItems[index].price;
				this.totalPrice += checked ? price : -price;
			}
		},
		showModal() {
			this.modalHidden = false;
		},
		hideModal() {
			this.modalHidden = true;
		},
		onCheckoutTap() {
			this.showModal();
		},
		submitOrder() {
			if (!this.orderName || !this.address || !this.phone) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			const selectedCartItems = this.cartItems.filter((item) => item.selected);
			// 构造产品请求数据
			const temp = {
				cartItems1: selectedCartItems.map((item) => ({
					stock: item.quantity,
					productId: item.carProductId // 假设这是后端需要的属性
				}))
			};
			console.log(temp.cartItems1);
			let jsonString = JSON.stringify(temp.cartItems1);
			console.log(jsonString);
			// 构造订单请求数据
			const orderData = {
				cartItems: selectedCartItems.map((item) => ({
					userId: 1,
					orderPrice: item.price * item.quantity,
					orderName: this.orderName,
					address: this.address,
					productId: item.carProductId, // 假设这是后端需要的属性
					productName: item.name,
					phone: this.phone,
					paymentMethod: this.paymentMethod
				}))
			};
			console.log('Order Data to be sent:', orderData.cartItems); // 打印请求数据
			// 发送请求到服务器
			uni.request({
				url: 'http://localhost:8080/order/addOrder',
				method: 'POST',
				data: orderData.cartItems, // 直接发送对象，uni.request会自动将其转换为JSON字符串
				header: {
					'content-type': 'application/json' // 指定内容类型为JSON
				},
				success: (res) => {
					console.log('提交的res' + res);
					this.clearSelectedCart();
					if (res.statusCode === 200) {
						uni.showToast({
							title: '订单提交成功'
						});
						this.hideModal();
						console.log(res);
					} else {
						console.error('Server returned status code:', res.statusCode, 'response:', res.data);
					}
				},
				fail: (err) => {
					console.error('Request failed:', err);
				}
			});
			uni.request({
				url: 'http://localhost:8080/product/updateProductStock',
				method: 'POST',
				data: jsonString, 
				header: {
					'content-type': 'application/json' // 指定内容类型为JSON
				},
				success: (res) => {
					console.log('提交的res' + res);
					if (res.statusCode === 200) {
						console.log('后台库存修改成功');
					} else {
						console.error('Server returned status code:', res.statusCode, 'response:', res.data);
					}
				},
				fail: (err) => {
					console.error('Request failed:', err);
				}
			});
		},
		clearSelectedCart() {
			console.log('当前 cartItems:', this.cartItems);
			// 收集所有选中的商品的carId
			const selectedCarIds = this.cartItems.filter((item) => item.selected).map((item) => item.id);
			const carList = selectedCarIds.map((id) => ({ carId: id }));
			// 如果没有选中的商品，直接返回
			if (selectedCarIds.length === 0) {
				return;
			}
			console.log('选中的商品 ID 数组' + JSON.stringify(carList));
			// 发送请求到服务器删除选中的购物车商品
			uni.request({
				url: 'http://localhost:8080/car/deleteCar', // 假设这是删除选中商品的后端API地址
				method: 'POST',
				data: JSON.stringify(carList), // 将选中的carIds发送给服务器
				header: {
					'content-type': 'application/json' // 指定内容类型为JSON
				},
				success: (res) => {
					console.log('传回来的东西' + res.statusCode);
					if (res.statusCode === 200) {
						this.cartItems = this.cartItems.filter((item) => !item.selected);
						this.calculateTotalPrice();
						this.selectAllStatus = false; // 假设这是控制全选状态的数据属性
					} else {
						uni.showToast({
							title: '删除购物车商品失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('Request failed:', err);
				}
			});
		},
	}
};
</script>
<style>
/* 基础布局样式 */
.cart {
	padding: 20rpx; /* 页面内边距 */
}

/* 购物车列表样式 */
.cart-list {
	height: calc(100vh - 130rpx - 120vh); /* 减去底部操作栏的高度和一些额外空间 */
	background-color: #fff;
	margin-bottom: 20rpx; /* 与底部操作栏保持一定间距 */
}

/* 单个购物车项样式 */
.cart-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	border-bottom: 1rpx solid #eee;
}

/* 复选框样式 */
.checkbox {
	margin-right: 20rpx;
}

/* 商品信息样式 */
.item-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.item-details {
	display: flex;
	flex-direction: column;
}

.item-name {
	font-size: 32rpx;
	color: #333;
}

.item-price {
	font-size: 28rpx;
	color: #f77;
}

/* 商品操作区域样式 */
.item-actions {
	display: flex;
	align-items: center;
}

.quantity-btn {
	width: 60rpx; /* 按钮宽度 */
	height: 60rpx; /* 按钮高度，与宽度一致形成圆形 */
	border-radius: 50%; /* 边框半径为50%，创建圆形边框 */
	border: 1rpx solid #ddd; /* 边框颜色设置为浅灰色 */
	background-color: transparent; /* 背景颜色设置为透明，如果不设置背景图片 */
	margin: 0 10rpx;
	padding: 0; /* 确保没有内边距，如果有的话 */
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: #e74d88;
}

.quantity-input {
	width: 45rpx;
	height: 40rpx;
	text-align: center;
	margin: 0 10rpx;
}

.delete-btn {
	width: 40rpx;
	height: 40rpx;
	margin-left: 20rpx;
}

/* 底部操作栏样式 */
.cart-summary {
	position: fixed;
	left: 0;
	bottom: 100rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 120rpx; /* 增加操作栏高度 */
	background-color: #fff;
	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
	z-index: 1000;
	margin-top: 0rpx;
}

/* 底部操作栏内的元素样式 */
.select-all {
	flex: 1; /* 占据等量空间 */
	text-align: center; /* 文本水平居中 */
	font-size: 21rpx; /* 增大字体大小 */
	padding: 20rpx 20rpx; /* 设置内边距 */
}

.summary-total {
	font-size: 21rpx;
	color: #e74d88;
	flex-shrink: 0; /* 防止元素缩小 */
	min-width: 200rpx; /* 确保元素有最小宽度 */
	margin-left: 10rpx; /* 与全选字样的距离 */
	margin-right: 2rpx; /* 与结算按钮的距离 */
	white-space: nowrap; /* 防止文本换行 */
	overflow: hidden; /* 隐藏溢出的内容 */
	text-overflow: ellipsis; /* 文本溢出时显示省略号 */
}

/* 结算按钮样式 */
.checkout-btn {
	width: 50%; /* 按钮宽度 */
	height: 90%; /* 按钮高度占满操作栏高度 */
	background-color: #ee5e95; /* 深粉色背景 */
	color: #fff;
	border: none;
	border-radius: 20rpx; /* 圆角 */
	font-size: 32rpx; /* 增大字体大小 */
	text-align: center;
	line-height: 120rpx; /* 保持文字垂直居中 */
	padding: 0 80rpx; /* 添加内边距 */
	transition: background-color 0.4s ease; /* 渐变过渡效果 */
}

/* 按钮点击后的样式 */
.checkout-btn:active {
	background-color: #ca64b0; /* 渐变后的颜色 */
}

/* 模态窗口 */
.modal {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 分割线 */
.divider {
	height: 0.5px; /* 分割线的厚度 */
	background-color: #cccccc; /* 分割线的颜色 */
	margin: 10px 0; /* 分割线与输入框的距离 */
}

.modal-content {
	background: #ffffff;
	border-radius: 10px;
	width: 70%; /* 调整宽度 */
	max-width: 300px; /* 调整最大宽度 */
	padding: 20px;
	box-sizing: border-box;
	z-index: 1000;
	display: flex;
	flex-direction: column; /* 使用flex布局，垂直排列内容 */
}

/* 按钮容器样式 */
.modal-buttons {
	display: flex;
	justify-content: space-around; /* 按钮平分空间，两端对齐 */
	margin-top: 20px; /* 与上文内容保持一定间距 */
}

/* 按钮样式 */
.modal-button {
	width: 200rpx;
	padding: 2px; /* 按钮内边距 */
	background-color: #ee5e95; /* 按钮背景颜色 */
	color: #fff; /* 按钮文字颜色 */
	border: none; /* 无边框 */
	border-radius: 5px; /* 按钮圆角 */
	outline: none; /* 点击时不显示轮廓 */
	transition: background-color 0.3s; /* 颜色变化的过渡效果 */
	font-size: 34rpx;
}

.modal-button:active {
	background-color: #12c523; /* 按钮按下时的背景颜色 */
}
</style>
